<template>
  <div class="vacation">
    <div class="vacation-title">周末去哪儿</div>

    <ul>
      <li class="vacation-item" v-for="value in vacationList" :key="value.id">
        <div class="vacation-img">
          <img :src="value.imgUrl" alt="" />
        </div>
        <div class="vacation-msg">
          <p class="vacation-msg-name">{{ value.name }}</p>
          <p class="vacation-msg-desc">{{ value.desc }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["vacationList"],
  name: "Vacation",
  data() {
    return {};
  },
};
</script>

<style scoped>
.vacation-title {
  font-size: 0.32rem;
  padding: 0.24rem;
}
.vacation-item {
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.vacation-item .vacation-img {
  height: 0px;
  padding-bottom: 37.4375%;
  overflow: hidden;
}
.vacation-item .vacation-img img {
  width: 100%;
}
.vacation-item .vacation-msg {
  padding: 0.14rem 0.2rem 0.2rem 0.2rem;
}
.vacation-item .vacation-msg p {
  margin-top: 0.18rem;
}
.vacation-msg .vacation-msg-name {
  color: #212121;
  font-size: 0.28rem;
}
.vacation-msg .vacation-msg-desc {
  color: #616161;
  font-size: 0.24rem;
}
</style>